<template>
  <div class="profile-container">
    <el-row :gutter="8" class="h-[100%] overflow-y-auto">
      <el-col
        :span="4"
        :xl="5"
        :lg="5"
        :md="8"
        :sm="10"
        :xs="24"
        class="mb-[8px] overflow-y-auto h-[99%] m-w-[300px]"
      >
        <leftUserCenter
          ref="leftUserCenterRef"
          @handleEditPwd="handleEditPwd"
        />
      </el-col>

      <el-col
        :span="20"
        :xl="19"
        :lg="19"
        :md="16"
        :sm="14"
        :xs="24"
        class="h-[100%] overflow-y-auto relative"
      >
        <div
          class="bg-[var(--el-bg-color)] rounded-[8px] shadow-[0_1px_0_0_#e6e7e9] h-[100%] overflow-y-auto"
        >
          <div
            v-if="activeTab == 'export'"
            class="absolute right-[18px] top-[10px] hover:text-[#3487ff] cursor-pointer"
            style="z-index: 100"
            @click="refresh"
          >
            <i class="main-iconfont icon-chongzhi"></i
            ><span class="text-[14px]">刷新</span>
          </div>
          
          <el-tabs
            class="profile-tab h-[100%] overflow-y-auto"
            v-model="activeTab"
            @tab-change="handleTabChange"
          >
            <el-tab-pane label="工作台" name="todo">
              <todoList @moreEvent="handleMore" />
            </el-tab-pane>
            <el-tab-pane label="导出中心" name="export" class="container">
              <exportCenter
                ref="exportCenterRef"
                v-if="activeTab === 'export'"
              />
              <!-- <el-backtop target=".container" :visibility-height="100" :right="100"></el-backtop> -->
            </el-tab-pane>
            <el-tab-pane label="消息中心" name="notice" class="container">
              <notice ref="noticeRef" v-if="activeTab === 'notice'" />
            </el-tab-pane>
            <el-tab-pane
              label="飞书日历"
              name="calendar"
              class="container"
              v-if="feishu_calendar"
            >
              <div
                class="px-[16px] py-[8px] homeCalendar"
                v-if="activeTab == 'calendar'"
              >
                <FsCalendar height="77vh" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <EditPwd v-model="editPwdVisible" :isClose="isClose" />
    <ResetPwdCode v-model="editPwdCodeVisible" :isClose="isClose" />
    <noticeMsg
      v-model="noticeMsgVisible"
      :data="msgData"
      @close="msgData = []"
    />
  </div>
</template>

<script setup name="Profile">
import message from "./message.vue";
import exportCenter from "./exportCenter";
import todoList from "./todoList/index.vue";
import EditPwd from "./resetPwd.vue";
import ResetPwdCode from "./resetPwdCode.vue";
import useUserStore from "@/store/modules/user";
import notice from "../notice/index.vue";
import leftUserCenter from "./leftUserCenter.vue";
import FsCalendar from "./todoList/calendar/index.vue";
import { authList } from "@/auth/index.js";
import { isPermission } from "@/hooks/index.js";
const leftUserCenterRef = ref();

import { getCookie, setCookie } from "@/utils/auth";
import { messagePop } from "@/api/system/notice.js";
import noticeMsg from "./components/noticeMsg/index.vue";
import { nextTick } from "vue";
const userData = useUserStore();
const is_pwd_has_overdue = computed(() => userData.pwd_has_overdue);
// userData.login_type == 1||userData.login_type == 2
const is_login_type = computed(() => true);
const is_up_pwd_time = computed(() => userData.up_pwd_time);
const feishu_calendar = computed(() =>
  isPermission(authList.calendar.feishu_calendar)
);
const route = useRoute();
const activeTab = ref("todo");
const isClose = ref(true);
const editPwdCodeVisible = ref(false);
onMounted(() => {
  if (route.path == "/user/profile") {
    activeTab.value = "todo";
    setTimeout(()=>{
      activeTab.value = "export";
    },100)
  } else if (route.path == "/user/notice") {
    activeTab.value = "notice";
  } else {
    activeTab.value = "todo";
  }
  if (
    is_login_type.value &&
    (is_pwd_has_overdue.value || !is_up_pwd_time.value)
  ) {
    isClose.value = false;
    editPwdCodeVisible.value = true;
  }
  let isLogin = getCookie("isLogin");
  if (!Number(isLogin)) return;
  messageList();
  setCookie("isLogin", 0);
  leftUserCenterRef.value.open();
});
const noticeMsgVisible = ref(false);
const msgData = ref([]);
const messageList = async () => {
  try {
    const { data } = await messagePop();
    msgData.value = data || [];
    if (!msgData.value?.length) return;
    noticeMsgVisible.value = true;
  } catch (error) {}
};

// 修改密码
const editPwdVisible = ref(false);
const handleEditPwd = () => {
  isClose.value = true;
  editPwdVisible.value = true;
};
// 导出中心
const exportCenterRef = ref();
const refresh = () => {
  exportCenterRef.value.query();
};

const handleMore = () => {
  activeTab.value = "notice";
};
const tabChangeActive = ref(null);
const handleTabChange = (tab) => {
  tabChangeActive.value = tab;
};
provide("tabChangeActive", tabChangeActive);
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 8px;
  height: 100%;
  overflow-y: auto;
  .box-card {
    box-shadow: none;
  }
  .profile-tab {
    :deep(.el-tabs__header) {
      margin: 0;
    }
    :deep(.el-tabs__nav-scroll) {
      padding-left: 10px;
    }
    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
    :deep(.el-tabs__content) {
      overflow: auto;
      height: calc(100% - 40px);
      .el-tab-pane {
        overflow: auto;
        height: 100%;
      }
    }
  }
}
</style>
